<template>
  <div>
    <van-nav-bar
      class="body-header"
      :title="title"
      left-text="返回"
      left-arrow
      @click-left="handleLeft"
    />
    <div class="line">
      <p>头像</p>
      <div>
        <img :src="avata" alt="" /><van-icon
          name="arrow"
          color="#666666"
          size="22"
        />
      </div>
    </div>
    <div class="line">
      <p>昵称</p>
      <div>
        <span>hehehe</span>
        <van-icon name="arrow" size="22" color="#666666" />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      title: '我的资料',
      avata: require('../assets/avata.png'),
    }
  },
  methods: {
    handleLeft() {
      console.log(this.$router)
      this.$router.go(-1)
    },
  },
}
</script>

<style lang="scss" scoped>
.line {
  height: 60px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  padding: 0 20px;
  border-bottom: 1px solid #eee;
  div {
    display: flex;
    align-items: center;
    span {
      color: #666666;
    }
    i {
      margin-left: 15px;
    }
  }
  img {
    width: 50px;
    background-repeat: no-repeat;
  }
}
</style>
